<template>
  <el-dialog
    title="上传素材"
    :visible="visible"
    width="400px"
    :before-close="handleClose"
  >
    <el-upload
      class="upload-demo"
      drag
      multiple
      action="#"
      :disabled="!!uploadFile"
      :auto-upload="false"
      :file-list="fileList"
      :limit="1"
      :accept="
        fileTypeMap[this.resourceType].acceptType
          .map((item) => `.${item}`)
          .join(',')
      "
      :on-change="changeFile"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div style="text-align: center" class="el-upload__tip" slot="tip">
        {{ fileTypeMap[this.resourceType].tips }}
      </div>
    </el-upload>
    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">上传</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  UploadPicture,
  UploadVideo,
  UploadDoc,
  AddResource,
} from "@/api/course/material.js";
export default {
  name: "AddResource",
  props: {
    resourceType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      visible: false,
      fileList: [],
      uploadFile: null,
      fileTypeMap: {
        4: {
          tips: "仅支持上传jpg/jpeg/png类型的图片文件，且不超过10MB",
          acceptType: ["png", "jpg", "jpeg"],
          limitSize: 10,
          uploadApi: UploadPicture,
          formType: "picFile",
        },
        1: {
          tips: "仅支持上传mp4类型的视频文件，且不超过500MB",
          acceptType: ["mp4"],
          limitSize: 500,
          uploadApi: UploadVideo,
          formType: "videoFile",
        },
        3: {
          tips: "仅支持上传pdf/ppt/pptx/doc/docx类型的文件，且不超过50MB",
          acceptType: ["pdf", "ppt", "pptx", "doc", "docx"],
          limitSize: 50,
          uploadApi: UploadDoc,
          formType: "docFile",
        },
      },
    };
  },
  methods: {
    changeFile(file) {
      const fileSize = 1024 * 1024 * 10;
      if (
        !this.fileTypeMap[this.resourceType].acceptType.includes(
          file.name.split(".").pop()
        )
      ) {
        this.$message.error(
          `仅支持上传${this.fileTypeMap[this.resourceType].acceptType.join(
            "，"
          )}格式的图片文件`
        );
        this.fileList = [];
        return;
      }
      if (
        file.size >
        this.fileTypeMap[this.resourceType].limitSize * 1024 * 1024
      ) {
        this.$message.error(
          `文件大小不能超过${this.fileTypeMap[this.resourceType].limitSize}MB`
        );
        this.fileList = [];
        return;
      }
      this.uploadFile = file;
    },
    show() {
      this.visible = true;
    },
    handleClose() {
      this.fileList = [];
      this.uploadFile = null;
      this.visible = false;
    },
    uploadResource(data) {
      const params = {
        resourceName: data.name,
        resourceUrl: data.url,
        resourceSize: data.size,
        resourceType: this.resourceType,
      };
      AddResource(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("上传成功");
          this.$emit("refresh");
          this.handleClose();
        }
      });
    },
    handleConfirm() {
      if (!this.uploadFile) {
        this.$message.error("请选择文件");
        return;
      }
      const formData = new FormData();
      formData.append(
        this.fileTypeMap[this.resourceType].formType,
        this.uploadFile.raw
      );
      this.fileTypeMap[this.resourceType].uploadApi(formData).then((res) => {
        if (res.code === 200) {
          let url = "";
          if (typeof res.data === "string") {
            url = res.data;
          } else {
            url = res.data.docUrl;
          }
          this.uploadResource({
            size: this.uploadFile.size,
            name: this.uploadFile.name,
            url,
          });
        }
      });
    },
  },
};
</script>

<style>
</style>